<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.taskid" placeholder="任务id" style="width: 250px;"></el-input>
        <el-input clearable v-model="search.businessid" placeholder="业务id" style="width: 250px;margin-left:5px;"></el-input>
        <el-select v-model="search.businesstype" clearable placeholder="业务类别" style="width: 150px; margin-left:5px;">
            <el-option 
            v-for="(item,index) in selectOptions.businessType"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="任务ID">
        <template slot-scope="scope">
          <span>
              {{scope.row.id}}
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="业务ID">
        <template slot-scope="scope">
          <span>{{ scope.row.businessId }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="业务类别">
        <template slot-scope="scope">
          <span>{{ scope.row.businessType| parseBusinessType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="任务名称">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="任务数据">
        <template slot-scope="scope">
          <span>{{ scope.row.taskInfo }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="计划时间">
        <template slot-scope="scope">
          <span>{{ scope.row.planTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="运行时间">
        <template slot-scope="scope">
          <span>{{ scope.row.excuteTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="['primary','danger','info','success',''][scope.row.result]" effect="dark">{{ scope.row.result | parseTaskResult }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="运行次数">
        <template slot-scope="scope">
          <span>{{ scope.row.runCount }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="创建时间">
        <template slot-scope="scope">
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="10%">
        <template slot-scope="scope">
            <el-button type="primary" size="small" v-if="scope.row.result==0" @click="handleRedisWindow(scope.row.id)">
                Redis状态
            </el-button>
            <span v-if="scope.row.result>0">
                <el-popconfirm title="确定要重启任务吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="handleRestartTask(scope.row.id)" >
                  <el-button slot="reference" type="danger" size="small"  style="margin-left:5px;" :loading="listbtnstate" >
                      重启任务
                  </el-button>
                </el-popconfirm>
            </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    <el-dialog title="Redis状态" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
            <span class="name ">键名</span>
            <span class="value">
               {{dialog.data.rediskey}}
            </span>
          </div>
          <div class="item">
            <span class="name ">是否存在</span>
            <span class="value">
               <el-tag effect="dark" :type="['info','success'][dialog.data.redisstate]">{{['不存在','存在'][dialog.data.redisstate]}}</el-tag>
            </span>
          </div>
          <div class="item">
            <span class="name ">过期时间</span>
            <span class="value">
               {{dialog.data.redisexpired}}
            </span>
          </div>
          <div class="item">
            <span class="name ">同步说明</span>
            <span class="value">
                如果当前任务不存在于Redis中，那么可以进行同步。最好先确认下发生此问题的缘由。
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="danger" @click="SyncRedisState()" :loading="dialog.saveloading">同步</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as taskApi from '@/api/systemtask'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'
import * as  enumHelper from '@/utils/enum'


export default {
  name: 'SystemTaskList',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listbtnstate:false,
      listQuery: {
        page: 1,
        rows: 20,
        taskid:'',
        businessid:'',
        businesstype:'0',
      },
      search:{
        taskid:'',
        businessid:'',
        businesstype:'',
      },
      selectOptions:{
        businessType:[]
      },
      dialog:{
          visible:false,
          saveloading:false,
          //数据
          data:{
            id:'',
            rediskey:'',
            redisstate:0,
            redisexpired:''
          }
      },
    }
  },
  created(){
      var that=this;
      that.getList();
      Object.values(enumHelper.system.systemTask).map(v=>{
        if(typeof(v)!='number'){return;}
        that.selectOptions.businessType.push({label:enumHelper.system.systemTask.getName(v),value:v});
      })
  },
  mounted(){
    
  },
  filters:{
    parseBusinessType(val){
      return enumHelper.system.systemTask.getName(val);
    },
    parseTaskResult(val){
      return enumHelper.system.taskResult.getName(val);
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      taskApi.getTaskList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.taskid=that.search.taskid.trim();
      that.listQuery.businessid=that.search.businessid.trim();
      that.listQuery.businesstype=that.search.businesstype || '0';
      that.getList();
    },
    handleRestartTask(id){
      var that=this;
      that.listbtnstate=true;
      taskApi.restartTask({id:id}).then(res=>{
        if(res.data){
           var idx=that.list.findIndex(o=>o.id==id);
           if(idx>-1){
             that.list[idx].result=enumHelper.system.taskResult.waiting;
             
           }else{
             that.getList();
           }
           that.$message({
             message:'重启成功',
             type:'success'
           })
        }
        setTimeout(()=>{
          that.listbtnstate=false;
        },500)
      }).catch(()=>{
        that.listbtnstate=false;
      })
    },
    handleRedisWindow(id){
        var that=this;
        that.dialog.visible=true;
        that.dialog.saveloading=false;
        that.dialog.data.id=id;
        that.dialog.data.rediskey="task_"+id;
        //查询redis状态
        taskApi.getRedisState({id:id}).then(res=>{
          if(res.data){
            if(res.data>0){
              that.dialog.data.redisexpired=res.data;
              that.dialog.data.redisstate=1;
            }else if(res.data==-1){
              that.dialog.data.redisexpired='未设置过期时间';
              that.dialog.data.redisstate=1;
            }else if(res.data==-2){
              that.dialog.data.redisexpired='';
              that.dialog.data.redisstate=0;
            }

          }
        });
    },
    SyncRedisState(){
      var that=this;
      that.dialog.saveloading=true;
        taskApi.syncRedisKey({id:that.dialog.data.id}).then(res=>{
          if(res.data){
            that.$message({
             message:'同步成功',
             type:'success'
           })
          }
          setTimeout(()=>{
            that.dialog.saveloading=false;
            that.dialog.visible=false;
          })
        }).catch(()=>{
          that.dialog.saveloading=false;
        })
    }
  }
}
</script>
